<template>
  <nav>
    <!--    <div class="logo"><img src="../assets/logo.png"></div>-->
    <div class="el-menu-item">
      <router-link to="/index" active-class="active" tag="li">宠物首页</router-link>
    </div>
    <div class="el-menu-item ">
      <router-link to="/specificPet" active-class="active" tag="li">具体宠物</router-link>
    </div>
    <div class="el-menu-item">
      <router-link to="/userShowApprove" active-class="active" tag="li">我的发布</router-link>
    </div>
    <div class="el-menu-item" >
      <router-link to="/userReleaseAdoption" active-class="active" tag="li">发布领养</router-link>
    </div>
    <div class="el-menu-item" >
      <router-link to="/userShowAdoption" active-class="active" tag="li">申请领养</router-link>
    </div>
    <div class="el-menu-item">
      <router-link to="/updateUser" active-class="active" tag="li">用户更新</router-link>
    </div>
  </nav>
</template>
<script>
export default {
  name: "Navbar"
}
</script>

<style lang="css">
nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

nav .el-menu-item {
  color: #FFFFFF;
  padding: 15px 100px;
  position: relative;
  text-align: center;
  border-bottom: transparent;
  display: flex;
  transition: 0.4s;
  font-size: larger;
  font-weight: bold;
}

nav .el-menu-item:hover {
  background-color: darkgray;
  border-bottom: solid 6px;
  border-bottom-color: brown;
  height: 80px;
}

.active {
  color: #ff0033;

}
</style>
